<script src="../../api/setting.api.js"></script>
<template>
    <div class="organization-list">
        <div class="organization-content-list">
            <div class="content-cotent">
                <div class="cotent-botton">
                    <div class="cotent-botton-input">
                        <el-input
                                placeholder="角色名称"
                                v-model="input10"
                                clearable>
                        </el-input>
                    </div>
                    <div class="cotent-botton-botton-one" @click="query">查 询</div>
                    <div class="cotent-botton-botton-two" @click="empty">清 空</div>
                </div>
                <div class="cotent-botton">
                    <div class="cotent-botton-botton-one" @click="addDetails">
                        新 增
                    </div>
                    <div class="cotent-botton-botton-two" @click="deletDetails">删 除</div>
                </div>
                <UserList :headlist="headlist" :contentlist="list" @selectList="selectList"></UserList>
                <Pagination :totalpag="totalpag" v-on:currentpage="currentpage"></Pagination>
            </div>

        </div>
        <addRole :dialogFormVisible="showDetails" @close="closeForm" @refreshList="refreshList" ></addRole>
    </div>
</template>
<script>
    import TissueTree from '../common/TissueTree';
    import UserList from '../common/user/UserList';
    import Pagination from '../common/Pagination';
    import addRole from '../common/Dialog/addRole';
    import distributionProperties from '../common/Dialog/distributionProperties';
    export default {
        name: "rolePemission",
        data(){
            return{
                organizationId: this.$store.getters.userData.userMsg.id,//组织id
                input10:"",
                totalpag:0,
                current:1,
                showDetails:false,
                selectLists:"",
                headlist:{
                    checkout:true,
                    operation:{
                        type:true,
                        fromurl:"rolePemission",
                    },
                    list:[
                        {
                            prop:"id",
                            label:"序号",
                            width:"80",
                        },{
                            prop:"name",
                            label:"角色名称",
                            width:"200",
                        },{
                            prop:"tips",
                            label:"角色描述",
                            width:"160",
                        }
                        ,{
                            prop:"lastUpdate",
                            label:"更新人",
                            width:"150",
                        }
                        ,{
                            prop:"lastUpdateTime",
                            label:"更新时间",
                            width:"200",
                        }
                    ]},
                list:[],


            }
        },
        components: {
            TissueTree,
            UserList,
            Pagination,
            addRole,
            distributionProperties
        },
        mounted(){
            this.getlist();

        },
        methods: {
            //刷新页面
            refreshList(){
                console.log("刷新刷新刷新")
                this.getlist();
            },
            //选择
            selectList(val){
                this.selectLists=val
            },
            //删除
            deletDetails(){
                let _this = this;
                let params={
                    roleIds:this.selectLists
                }
                if(this.selectLists){
                    this.$confirm('是否确定删除选项', '确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(() => {
                    _this.Api.setting.roleDel(params).then((data)=>{
                        if(data.returnCode==10000){
                            this.getlist()
                            this.$message({
                                type: 'success',
                                message:"恭喜你，删除成功"
                            });
                        }else {
                            this.$message({
                                type: 'warning',
                                message: data.msg
                            });
                        }

                    }).catch((err)=>{

                    })
                    }).catch(() => {

                    });
                    console.log("删除的",this.selectLists)
                }else {
                    this.$alert('您还没勾选删除内容', '温馨提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                }

            },
            //新增
            addDetails(){
                this.showDetails=true
            },
            closeForm(){
                this.showDetails=false;
            },
            //查询
            query(){
                if(this.input10==""){
                    this.$message({
                        message: '还没输入查询内容哦',
                        type: 'warning'
                    });
                }else {
                    this.getlist()
                }
            },
            //清空
            empty(){
                this.input10=""
                this.getlist()
            },
            currentpage(currentpage){
                console.log("当前页，",currentpage)
                this.current=currentpage
                this.getlist()
            },
            getlist(){
                let _this = this;
                let params={
                    current:_this.current,
                    size:10,
                    distributorId:_this.organizationId,
                    name:this.input10,
                }
                _this.Api.setting.roleList(params).then((data)=>{
                    _this.totalpag=data.data.total;
                    _this.list=data.data.records;
                })
            }

        }
    }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
    .organization-list{
        display: flex;
        .organization-content-list{
            margin: 20px;
            .content-cotent{
                background-color: #ffffff;
                padding: 24px 32px;
                .content-title{
                    display: flex;
                    margin-bottom: 24px;
                    div{
                        font-size:14px;
                        font-family:PingFangSC-Regular;
                        font-weight:400;
                        color:rgba(51,51,51,0.85);
                        line-height:22px;
                        margin-right: 16px;
                    }
                    .title{
                        font-size:20px;
                        font-family:PingFangSC-Medium;
                        font-weight:500;
                        color:rgba(0,0,0,0.85);
                    }
                }
            }
            .cotent-botton{
                display: flex;
                margin-bottom: 24px;
                .cotent-botton-input{
                    width:200px;
                    height:32px;
                    margin-right: 16px;

                }
                .cotent-botton-botton-one{
                    width:65px;
                    height:32px;
                    line-height: 32px;
                    text-align: center;
                    background:rgba(24,144,255,1);
                    border-radius:4px;
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    margin-right: 16px;
                    cursor: pointer;
                }
                .cotent-botton-botton-two{
                    width:65px;
                    height:32px;
                    line-height: 32px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                    border:1px #D9D9D9 solid;
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.65);
                    text-align: center;
                    margin-right: 16px;
                    cursor: pointer;
                }
                .cotent-botton-botton-two2{
                    width:88px;
                    height:32px;
                    line-height: 32px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                    border:1px #D9D9D9 solid;
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.65);
                    text-align: center;
                    margin-right: 16px;
                    cursor: pointer;
                }
            }
        }
    }
</style>